<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Form</title>
<style>
	body { padding: 30px }
	form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
	
	.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
	.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
	.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.form.min.js"></script>
<script>
    $(function() {
        var bar = $('.bar');
        var percent = $('.percent');
        var status = $('#status');
        
        $("input:file").change(function( event ) {
            var percentVal = '0%';
            bar.width(percentVal)
            percent.html(percentVal);
        });
        
        $('form').ajaxForm({
            beforeSend: function() {
                status.empty();
                var percentVal = '0%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            uploadProgress: function(event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
                bar.width(percentVal)
                percent.html(percentVal);
        		//console.log(percentVal, position, total);
            },
            success: function() {
                var percentVal = '100%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
        	complete: function(xhr) {
        		//status.html(xhr.responseText);
        		
        	}
        });   
    });
</script>
</head>
<body>

<body>
	<h1>File Upload Progress Multi</h1>
	
    <form action="/opencms/esf/upload/add.action" method="post" enctype="multipart/form-data">
        <input type="file" name="fileAllegato"><br>
        <input type="file" name="fileAllegato"><br>
        <input type="file" name="fileAllegato"><br>
        <input type="submit" value="Upload File to Server">
    </form>
    
    <div class="progress">
        <div class="bar"></div>
        <div class="percent">0%</div>
    </div>
    
    <div id="status"></div>

</body>


</html>